<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*css代码标签，设置样式*/
    input+span {
      /*+表示相邻*/
      color: black;
      font-size: 12px;
    }
  </style>

  <script type="text/javascript"> /*js代码标签，定义函数*/
    /*function checkForm(){
      //获取两个文本框中的内容
      var uname=document.getElementById("uname").value;
      var upass=document.getElementById("upass").value;
      //判断两文本框中内容是否为空
      if(uname==""||uname==null){
        document.getElementById("nameSpan").innerHTML="<img src='img/error.png'>用户名不能为空！";
      }
      if(upass==""||upass==null){
        document.getElementById("passSpan").innerHTML="<img src='img/error.png'>密码不能为空！";
      }
    }*/

    function checkName(obj) { //用户名文本框内容检查
      if (obj.value == "" || obj.value == null) { //若文本框输入为空
        document.getElementById("nameSpan").innerHTML = "<img src='../img/error.png'>用户名不能为空！";
      } else {
        document.getElementById("nameSpan").innerHTML = "<img src='../img/ok.png'>";
      }
    }

    function checkPass(obj) { //密码文本框内容检查
      if (obj.value == "" || obj.value == null) {
        document.getElementById("passSpan").innerHTML = "<img src='../img/error.png'>密码不能为空！";
      } else if (obj.value.length == 6) { //若文本字符长度为6位
        document.getElementById("passSpan").innerHTML = "<img src='../img/ok.png'>";
      } else {
        document.getElementById("passSpan").innerHTML = "<img src='../img/error.png'>密码长度必须是6位！";
      }
    }

    function checkEmail(obj) { //邮箱文本框内容检查
      if (obj.value != "" && obj.value != null) {
        if (obj.value.indexOf("@") == -1) { //若文本内容中不包含@符号
          document.getElementById("emailSpan").innerHTML = "<img src='../img/error.png'>错误的邮件地址！";
        } else {
          document.getElementById("emailSpan").innerHTML = "<img src='../img/ok.png'>";
        }
      }
      else {//若文本框输入不为空
        document.getElementById("emailSpan").innerHTML = "此项选填！";
      }
    }

  </script>
</head>

<body>
  <table>
    <!--表格-->
    <tr>
      <!--表格第一行-->
      <td>
        <label>用户名：</label>
      </td>
      <td>
        <input id="uname" type="text" placeholder="请输入用户名" onblur="checkName(this)" />
        <span id="nameSpan"></span>
      </td>
    </tr>

    <tr>
      <!--表格第二行-->
      <td>
        <label>密&nbsp;&nbsp;&nbsp;码：</label>
      </td>
      <td>
        <input id="upass" type="text" placeholder="请输入6位密码" onblur="checkPass(this)" />
        <span id="passSpan"></span>
      </td>
    </tr>

    <tr>
      <!--表格第三行-->
      <td>
        <label>邮箱登录：</label>
      </td>
      <td>
        <input id="uemail" placeholder="请输入邮箱地址" onblur="checkEmail(this)" onblur="checkEmail(this)" />
        <span id="emailSpan">此项选填！</span>
      </td>
    </tr>

    <tr>
      <!--表格第四行-->
      <td colspan="2">
        <button onclick="checkForm()">登&nbsp;&nbsp;&nbsp;录</button>
      </td>
    </tr>


  </table>




  <img src="../img/String对象的属性和方法.png" width="700px" height="500px" />
</body>

</html>